import {Component, OnInit, Input, OnChanges} from '@angular/core';
// @ts-ignore
import {EChartOption} from 'echarts';

@Component({
    selector: 'kylin-pie-chart',
    templateUrl: './pie-chart.component.html',
    styleUrls: ['./pie-chart.component.less']
})
export class PieChartComponent implements OnInit, OnChanges {

    @Input() title = null;
    @Input() type = null;
    @Input() data = null;

    pieChartData: EChartOption;

    constructor() {
    }

    ngOnChanges(changes): void {
        if (changes.data.currentValue) {
            let value1 = 0;
            let value2 = 0;
            changes.data.currentValue.map(i => {
                if (i.type === 1) {
                    value1 = i.actualArea;

                } else {
                    value2 = i.actualArea;
                }
            });
            this.chartDataInit(value1, value2);
        }
    }

    ngOnInit() {
    }

    private chartDataInit(value1, value2 = 0) {
        this.pieChartData = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            title: {
                text: this.title,
            },
            legend: {
                bottom: 'left',
                data: ['一年生', '多年生']
            },
            series: [
                {
                    name: this.title,
                    type: 'pie',
                    radius: '55%',
                    data: [
                        {value: value1, name: '一年生', itemStyle: {color: '#EA6144'}},
                        {value: value2, name: '多年生', itemStyle: {color: '#5599FE'}}
                    ]
                }
            ]
        };
    }

}
